<template>
  <el-button type="success" id="button" @click="add">添加</el-button>
    <el-table
  :data="tableData"
  style="width: 100%;padding: 20px;"
  >
      <el-table-column prop="id" label="id" width="200px">
      </el-table-column>
      <el-table-column label="轮播图" prop="power">
        <template #default="scope">
          <img :src="scope.row.carousel" alt="" id="img">
        </template>
      </el-table-column>
      <el-table-column label="详情" prop="txt">
      </el-table-column>
      <el-table-column label="操作">
          <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
  <!-- 弹出框 -->
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">添加轮播图</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        返回
      </el-button>
    </template>
    <el-form
    label-position="left"
    label-width="100px"
    :model="formLabelAlign"
    style="max-width: 460px"
  >
  <!-- 弹出框表单 -->
    <el-form-item label="详情">
      <el-input v-model="formLabelAlign.txt" />
    </el-form-item>
    <el-form-item label="轮播图地址">
      <el-input v-model="formLabelAlign.carousel" />
    </el-form-item>
    <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :limit="1"
            :http-request="handleUploadOk"
          >
            <el-button type="primary">上传轮播图</el-button>
            <template #tip>
              <div class="el-upload__tip">jpg/png 图片大小不 500KB.</div>
            </template>
  </el-upload>
  <el-button type="large" @click="addcarousel">添加</el-button>
  </el-form>
  </el-drawer>
  <!-- 编辑弹窗 -->
  <el-drawer v-model="visibles" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">修改轮播图</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        返回
      </el-button>
    </template>
    <el-form
    label-position="left"
    label-width="100px"
    :model="formLabelAlign"
    style="max-width: 460px"
  >
  <!-- 弹出框表单 -->
    <el-form-item label="详情">
      <el-input v-model="formLabelAlign.txt" />
    </el-form-item>
    <el-form-item label="轮播图地址">
      <el-input v-model="formLabelAlign.carousel" />
    </el-form-item>
    <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :limit="1"
            :http-request="handleUploadOk"
          >
            <el-button type="primary">上传轮播图</el-button>
            <template #tip>
              <div class="el-upload__tip">jpg/png 图片大小不 500KB.</div>
            </template>
  </el-upload>
  <el-button type="large" @click="carousedit">修改</el-button>
  </el-form>
  </el-drawer>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import { put, getFileNameUUID } from '@/util/alioss';
import {
  Carouseedit, Edit, Carousellist, CarouseDel, Carouseadd,
} from '@/api/http';
// 弹出框参数
const visible = ref(false);
const visibles = ref(false);
const formLabelAlign = reactive({
  id: '',
  carousel: '',
  txt: '',
});
// 保存图片
const fileList = ref();

const store = useStore();

const tableData = ref([]);
// 添加轮播图
const addcarousel = async () => {
  const res = await Carouseadd(formLabelAlign);
  if (res.status === 201) {
    ElMessage({ message: '添加成功', type: 'success' });
    visible.value = false;
    // eslint-disable-next-line no-use-before-define
    getMessage();
  }
  console.log(res);
};
// 打开抽屉
const add = () => {
  visible.value = true;
  formLabelAlign.carousel = '';
  formLabelAlign.txt = '';
  formLabelAlign.id = getFileNameUUID();
};
// 上传图片
const handleUploadOk = async (option :any) => {
  // console.log('点击上传要得到的内容', option);
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  // 我们无论是使用什么ui框架 上传的流程当中只要能获取到 文件的file对象就可以完成自定义的上传
  // 生成的文件名称
  // 电竞平台.png => split => [电竞平台, png] => pop => png
  const objName = [getFileNameUUID(), option.file.name.split('.').pop()].join('.');

  // 调用 ali-oss 中的方法  put(文件名, 文件对象)
  const res = await put(`${objName}`, option.file);
  loading.close();
  // console.log('上传的结果', res);
  // 对于elemetui或者是plus 自定义上传成功之后需要正确的填充上传的结果到 fileList
  // 这里需要手动的通过 Promise.resolve来返回请求的结果 这个结果会自动的加载到
  formLabelAlign.carousel = res.url;
};
// 获取轮播图信息
const getMessage = async () => {
  const { data } = await Carousellist();
  tableData.value = data;
};
onMounted(() => {
  getMessage();
  // console.log(tableData.value);
});

// 编辑信息
const handleEdit = async (row: any) => {
  formLabelAlign.carousel = row.carousel;
  formLabelAlign.txt = row.txt;
  formLabelAlign.id = row.id;
  visibles.value = true;
};
const carousedit = async () => {
  const res = await Carouseedit(formLabelAlign.id, formLabelAlign);
  getMessage();
  visibles.value = false;
  // console.log(res);
};
// 删除信息
const handleDelete = (row: any) => {
  // console.log('删除');

  ElMessageBox.confirm(
    '确定删除该用户吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      const res = await CarouseDel(row.id);
      if (res.status === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功！',
        });
        getMessage();
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败！',
        });
      }
      getMessage();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};

</script>

<style scoped>
#img{
  width: 200px;
  height: 100px;
}
#button{
  margin-bottom: 20px;
}
h4{
  text-align: center;
}
</style>
